<template>
<q-page padding>
  <q-field
    icon="filter"
    >
    <q-select
      clearable
      radio
      v-model="select"
      float-label="标签筛选"
      @input="addFilter"
      :options="tags">
    </q-select>
  </q-field>
  <objlist
    :title="title"
    :item-endpoint="itemEndpoint"
    :url="url"
    ></objlist>
</q-page>
</template>

<script>
import DescribedObjList from 'components/DescribedObjList'

const tags = [
  {'label': 'age', 'value': 'age', 'rightColor': 'red'},
  {'label': 'area_tiers', 'value': 'area_tiers', 'rightColor': 'pink'},
  {'label': 'brand_intention', 'value': 'brand_intention', 'rightColor': 'purple'},
  {'label': 'education', 'value': 'education', 'rightColor': 'deep-purple'},
  {'label': 'gender', 'value': 'gender', 'rightColor': 'indigo'},
  {'label': 'income', 'value': 'income', 'rightColor': 'blue'},
  {'label': 'segment', 'value': 'segment', 'rightColor': 'light-blue'}]

const baseUrl = 'vdatas/?projection={"name":1,"title":1,"description":1}' +
      '&max_results=10&'
export default {
  name: 'VdataList',
  components: {
    objlist: DescribedObjList
  },
  computed: {
    tagFilterUrl () {
      if (this.select != null) {
        return 'where={"tags":"' + this.select + '"}&'
      } else {
        return '&'
      }
    }
  },
  data () {
    return {
      url: baseUrl,
      title: '可视化列表',
      itemEndpoint: 'vdataplot',
      tags: tags,
      select: null
    }
  },
  methods: {
    addFilter () {
      this.url = baseUrl + this.tagFilterUrl
    }
  }
}
</script>

<style>
</style>
